<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style type="text/css">
        @media screen and (min-width: 1150px) and (max-width: 1200px) {
            #slide-pic #slide-pic-list #pic-show-list {
                margin-left: 15px;
            }
            #wrap #navigate-left {
                width: 600px;
            }
        }
        @media screen and (max-width: 1150px) {
            #slide-pic #slide-pic-list #pic-show-list {
                margin-left: 10px;
            }
            #wrap #navigate-left {
                width: 600px;
            }
        }
        @media screen and (max-width: 960px) {
            #wrap #search {
                left: 60px;
            }
        }
        @media screen and (max-width: 900px) {
            #wrap #navigate-left {
                width: 400px;
            }
            #slide-pic #slide-pic-list #pic-show-list {
                margin-left: 5px;
            }
        }
        @media screen and (max-width: 840px) {
            #wrap #search {
                width: 70%;
            }
            #wrap #search #search-log {
                width: 49px;
                height: 49px;
                background-image: url("images/smallbing.gif");
                background-position: 0 0;
                margin-right: 0;
                position: absolute;
            }
            #wrap #search form {
                padding-top: 0;
                width: 100%;
            }
            #wrap #search form .search-button {
                width: 40px;
                height: 40px;
                background-image: url("images/small-search.gif");
                background-position: 0 0;
                background-color: transparent;
                border: 1px solid #fff;
                top: 2px;
            }
            #slide-pic #slide-pic-list {
                display: none;
            }
            #wrap #slide-pic-logo #slide-pic-left {
                display: none;
            }
            #wrap #slide-pic {
                height: 45px;
                margin-top: 0;
                top: 670px;
            }
            #wrap #control-i-info {
                bottom: 35px;
            }
        }
        @media screen and (max-width: 720px) {
            #wrap #navigate-left {
                width: 300px;
            }
            #beian #beian-left {
                display: none;
            }
        }
        @media screen and (max-width: 620px) {
            #wrap #navigate-left {
                width: 200px;
            }
        }
        
    </style>
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>

<body onload="myGetTime()">
    <div id="setting-web">
        <div id="sidebar">
            <ul>
                <li>
                    <a href="javascript:void(0)" id="binglogo" onclick="hideSetting()">
                        <span></span>
                    </a>
                </li>
                <li>
                    <a href="" class="setting-li" id="setting-li-first">
                        <span class="setting-first"></span>
                        <p>历史记录</p>
                    </a>
                </li>
                <li>
                    <a href="" class="setting-li">
                        <span class="setting-last"></span>
                        <p>设置</p>
                    </a>
                </li>
            </ul>
            <div id="setting-triangle"></div>
        </div>
        <div id="setting-content">
            <div id="account-info">
                <ul>
                    <li>
                        <a href="" class='english-font'>Bing.com in English</a>
                    </li>
                    <li>
                        <a href="" class="account-log">
                            <span>登录</span>
                            <span class="log"></span>
                        </a>
                    </li>
                    <li>
                        <a href="" class="settingll"></a>
                    </li>
                </ul>
            </div>
            <div id="setting-wrap">
                <h1>设置</h1>
                <div class="clearfloat">
                    <ul>
                        <li>
                            <a href="" class="extra">常规</a>
                        </li>
                        <li><a href="">网页</a></li>
                        <li><a href="">主页</a></li>
                        <li><a href="">资讯</a></li>
                        <li><a href="">全球(WORLDWIDE)</a></li>
                    </ul>
                </div>
                <h2>安全搜索</h2>
                <div class="safe-search">您所在的国家或地区要求严格的必应安全搜索设置，此设置会筛选掉可能会返回成人内容的结果。如果您正在查看成人内容，<span class="blue">请告知我们</span>，以便我们在将来将其筛选掉。若要详细了解有关<span class="blue">您所在国家或地区</span>的安全搜索要求，请参阅<span class="blue">必应提供搜索结果的方式</span></div>
                <div class="greystraight"></div>
                <h2>显示语言</h2>
                <p>选择用于必应显示和布局的语言。</p>
                <form>
                    <select name="cars">
                        <option value="volvo">简体中文</option>
                        <option value="saab">繁体中文</option>
                        <option value="fiat">English</option>
                        <option value="audi">French</option>
                    </select>
                </form>
                <div class="greystraight"></div>
                <h2>搜索建议</h2>
                <p>当您键入时显示搜索建议。</p>
                <input type="checkbox">
                <span class="begin-search">开启搜索建议</span>
                <div id="setting-button">
                    <a href="" class="save-button">
                        <span class="save">保存</span>
                    </a>
                    <a href="">
                        <span>恢复默认设置</span>
                    </a>
                    <a href="javascript:void(0)" onclick="hideSetting()" id="cancel-button">
                        <span class="cancel">取消</span>
                    </a>
                </div>
                <div id="greystraight2"></div>
                <div id="copy" class="clearfloat">
                    <ul>
                        <li>
                            <span>© 2015 Microsoft</span>
                            <span>|</span>
                        </li>
                        <li>
                            <a href="">招贤纳士</a>
                            <span>|</span>
                        </li>
                        <li>
                            <a href="">隐私声明和 Cookie</a>
                            <span>|</span>
                        </li>
                        <li>
                            <a href="">使用条款</a>
                            <span>|</span>
                        </li>
                        <li>
                            <a href="">广告</a>
                            <span>|</span>
                        </li>
                        <li>
                            <a href="">帮助</a>
                            <span>|</span>
                        </li>
                        <li>
                            <a href="" id="extra">反馈</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="wrap">
        <div id="container" onmousemove="showAnchor()">
            <div class="pic-show last">
                <img src="images/pic1.jpg">
                <div class="anchor" id="pic1-anchor1" onmousemove="showAnchorInfo(0)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic1-anchor-info1" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
                <div class="anchor" id="pic1-anchor2" onmousemove="showAnchorInfo(1)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic1-anchor-info2" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
                <div class="anchor" id="pic1-anchor3" onmousemove="showAnchorInfo(2)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic1-anchor-info3" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
            </div>
            <div class="pic-show">
                <img src="images/pic2.jpg">
                <div class="anchor" id="pic2-anchor1" onmousemove="showAnchorInfo(3)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic2-anchor-info1" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
                <div class="anchor" id="pic2-anchor2" onmousemove="showAnchorInfo(4)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic2-anchor-info2" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
                <div class="anchor" id="pic2-anchor3" onmousemove="showAnchorInfo(5)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic2-anchor-info3" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
            </div>
            <div class="pic-show">
                <img src="images/pic3.jpg">
                <div class="anchor" id="pic3-anchor1" onmousemove="showAnchorInfo(6)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic3-anchor-info1" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
                <div class="anchor" id="pic3-anchor2" onmousemove="showAnchorInfo(7)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic3-anchor-info2" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
                <div class="anchor" id="pic3-anchor3" onmousemove="showAnchorInfo(8)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic3-anchor-info3" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
            </div>
            <div class="pic-show">
                <img src="images/pic4.jpg">
                <div class="anchor" id="pic4-anchor1" onmousemove="showAnchorInfo(9)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic4-anchor-info1" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
                <div class="anchor" id="pic4-anchor2" onmousemove="showAnchorInfo(10)">
                </div>
                <a href="javascript:void(0)" class="anchor-info" id="pic4-anchor-info2" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
                <div class="anchor" id="pic4-anchor3" onmousemove="showAnchorInfo(11)">
                </div>
                <a href="javascript:void(0)" class="anchor-info" id="pic4-anchor-info3" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
            </div>
            <div class="pic-show">
                <img src="images/pic5.jpg">
                <div class="anchor" id="pic5-anchor1" onmousemove="showAnchorInfo(12)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic5-anchor-info1" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
                <div class="anchor" id="pic5-anchor2" onmousemove="showAnchorInfo(13)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic5-anchor-info2" onmousemove="keepAnchorInfo()">
                    顺手把仙人球放在了门口的架子上，对自己的手吹气，
                    <br>
                    <span>因为自己想要让它少挨些冻也是将自己扎得十分难受。</span>
                    <span class="triangle">>></span>
                </a>
                <div class="anchor" id="pic5-anchor3" onmousemove="showAnchorInfo(14)"></div>
                <a href="javascript:void(0)" class="anchor-info" id="pic5-anchor-info3" onmousemove="keepAnchorInfo()">
                    寒假如画，描绘着我五彩缤纷的生活；寒假如书，记录着我的一点一滴
                    <br>
                    <span>寒假如歌，歌颂着我的欢乐趣事</span>
                    <span class="triangle">>></span>
                </a>
            </div>
        </div>
        <div id="search">
            <div id="search-log"></div>
            <form>
                <input type="text">
                <input type="submit" value="" class="search-button">
            </form>
        </div>
        <div id="spare-search"></div>
        <div id="qr-code" onclick="showQrCode()">
            <span>必应映像</span>
        </div>
        <div id="show-qr-code">
            <div></div>
            <span>使用微信“扫一扫” 尽享缤纷首页故事。</span>
            <a href="">参与必应VIP问卷</a>
        </div>
        <div id="navigate" class="clearfloat">
            <div id="navigate-left">
                <ul class="clearfloat">
                    <li>
                        <a href="">图片</a>
                    </li>
                    <li>
                        <a href="">视频</a>
                    </li>
                    <li>
                        <a href="">网典</a>
                    </li>
                    <li>
                        <a href="">资讯</a>
                    </li>
                    <li>
                        <a href="">地图</a>
                    </li>
                    <li>
                        <a href="">词典</a>
                    </li>
                    <li>
                        <a href="">更多</a>
                    </li>
                    <li>
                        <span>|</span>
                    </li>
                    <li>
                        <a href="">微软导航</a>
                    </li>
                    <li>
                        <a href="">必应软件</a>
                    </li>
                    <li id="show-list-menu" onmouseover="showListMenu()">
                        <a href="" class='english-font'>OFFICE ONLINE</a>
                    </li>
                    <li>
                        <a href="" class='english-font'>OUTLOOK.COM</a>
                    </li>
                </ul>
            </div>
            <div id="navigate-right">
                <ul class="clearfloat">
                    <li>
                        <a href="" class='english-font'>Bing.com in English</a>
                    </li>
                    <li>
                        <span>|</span>
                    </li>
                    <li onclick="showLogInfo()">
                        <a href="javascript:void(0)">登录</a>
                    </li>
                    <li onclick="showLogInfo()">
                        <a href="javascript:void(0)" class="log"></a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" onclick="showSetting()" class="setting"></a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="list-menu">
            <ul class='clearfloat' onmouseover="showListMenu()" onmouseout="hideListMenu()">
                <li>
                    <a href="" class="word"></a>
                    <span class='english-font'>Word Online</span>
                </li>
                <li>
                    <a href="" class='powerpoint'></a>
                    <span class="english-font">PowerPoint</span>
                    <br>
                    <span class="english-font adjust">Online</span>
                </li>
                <li>
                    <a href="" class="excel"></a>
                    <span class="english-font">Excel Online</span>
                </li>
                <li>
                    <a href="" class="calendar"></a>
                    <span class="adjust2">日历</span>
                </li>
                <li>
                    <a href="" class='connection'></a>
                    <span class="adjust2">人脉</span>
                </li>
                <li>
                    <a href="" class="onenote"></a>
                    <span class="english-font adjust3">OneNote</span>
                    <br>
                    <span class="english-font adjust">Online</span>
                </li>
                <li>
                    <a href="" class="onedrive"></a>
                    <span class="english-font adjust3">OneDrive</span>
                </li>
            </ul>
        </div>
        <div id="log-info">
            <p>账户</p>
            <a href="">
                <span class="micro-logo"></span>
                <span class="english-font">Microsoft 账户</span>
                <span class="english-font log-link">连接</span>
            </a>
            <hr>
            <a href="" class="log-link">
                <span>历史搜索记录</span>
            </a>
        </div>
        <div id="control-i-info" onmouseover="showControlInfo()" onmouseout="hideControlInfo()">
            <a href="">老爸见了，一下子哈哈大笑起来，我被羞得面红耳赤，但一</a>
            <span>一个月前，我们在体育课上进行了立定跳远的比赛，我由于人长得高，挥动手臂就不是很自如，“小祝同学，你跳的这也……哎，一米五。”</span>
        </div>
        <div id="share-log-list" class="clearfloat">
            <a href="javascript:void(0)" id="share-log1" onclick="changeLog(1)"></a>
            <a href="javascript:void(0)" id="share-log2" onclick="changeLog(2)"></a>
            <a href="javascript:void(0)" id="share-log3" onclick="changeLog(3)"></a>
            <a href="javascript:void(0)" id="share-log4" onclick="changeLog(4)"></a>
            <a href="javascript:void(0)" id="share-log5" onclick="changeLog(5)"></a>
        </div>
        <div id="slide-pic">
            <div id="slide-pic-logo">
                <div id="slide-pic-left">
                    <a href="javascript:void(0)" onclick="up_down()"></a>
                </div>
                <div id="slide-pic-right">
                    <div class="share-info">分享到</div>
                    <a href="javascript:void(0)" class="share-info-logo" onclick="linkShare()">
                        <span class="connection-logo"></span>
                    </a>
                    <a href="javascript:void(0)" class="share-info-logo" onclick="showShareLog()">
                        <span class="button"></span>
                    </a>
                    <span>1999</span>
                    <div id="control-logo">
                        <a href="javascript:void(0)" onclick="fadeInPre()" id="control-logo1"></a>
                        <a href="javascript:void(0)" onclick="fadeInAft()" id="control-logo2"></a>
                        <a href="javascript:void(0)" id="control-logo3" onmouseover="showControlInfo()"></a>
                        <a href="javascript:void(0)" id="control-logo4"></a>
                    </div>
                </div>
            </div>
            <div id="slide-pic-list">
                <a href="javascript:void(0)" class="change-log" onclick="changeSlidePre()" id="change-left">
                    <span></span>
                </a>
                <div id="pic-show-list">
                    <div id="pic-show-place">
                        <ul class="clearfloat">
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food1.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food2.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food3.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food4.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food5.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food6.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food7.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food8.jpg" alt="">
                            </li>
                            <li>
                                <p>美丽的风景</p>
                                <img src="images/scene1.jpg" alt="">
                            </li>
                            <li>
                                <p>美丽的风景</p>
                                <img src="images/scene2.jpg" alt="">
                            </li>
                            <li>
                                <p>美丽的风景</p>
                                <img src="images/scene3.jpg" alt="">
                            </li>
                            <li>
                                <p>美丽的风景</p>
                                <img src="images/scene4.jpg" alt="">
                            </li>
                            <li>
                                <p>美丽的风景</p>
                                <img src="images/scene5.jpg" alt="">
                            </li>
                            <li>
                                <p>美丽的风景</p>
                                <img src="images/scene6.jpg" alt="">
                            </li>
                            <li>
                                <p>美丽的风景</p>
                                <img src="images/scene7.jpg" alt="">
                            </li>
                            <li>
                                <p>美丽的风景</p>
                                <img src="images/scene8.jpg" alt="">
                            </li>
                            <li>
                                <p>刺激的运动</p>
                                <img src="images/sport1.jpg" alt="">
                            </li>
                            <li>
                                <p>刺激的运动</p>
                                <img src="images/sport2.jpg" alt="">
                            </li>
                            <li>
                                <p>刺激的运动</p>
                                <img src="images/sport3.jpg" alt="">
                            </li>
                            <li>
                                <p>刺激的运动</p>
                                <img src="images/sport4.jpg" alt="">
                            </li>
                            <li>
                                <p>刺激的运动</p>
                                <img src="images/sport5.jpg" alt="">
                            </li>
                            <li>
                                <p>刺激的运动</p>
                                <img src="images/sport6.jpg" alt="">
                            </li>
                            <li>
                                <p>刺激的运动</p>
                                <img src="images/sport7.jpg" alt="">
                            </li>
                            <li>
                                <p>刺激的运动</p>
                                <img src="images/sport8.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food1.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food2.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food3.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food4.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food5.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food6.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food7.jpg" alt="">
                            </li>
                            <li>
                                <p>美味的食物</p>
                                <img src="images/food8.jpg" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
                <a href="javascript:void(0)" class="change-log" id="change-right" onclick="changeSlideAft()">
                    <span></span>
                </a>
            </div>
        </div>
        <div id="beian">
            <div id="beian-left">
                <span>©图片来源</span>
            </div>
            <div id="beian-right">
                <ul class="clearfloat">
                    <li>
                        <span>© 2015 Microsoft</span>
                        <span>|</span>
                    </li>
                    <li>
                        <span>沪ICP备10042051号</span>
                        <span>|</span>
                    </li>
                    <li>
                        <a href="">隐私声明和 Cookie</a>
                        <span>|</span>
                    </li>
                    <li>
                        <a href="">使用条款</a>
                        <span>|</span>
                    </li>
                    <li>
                        <a href="">广告</a>
                        <span>|</span>
                    </li>
                    <li>
                        <a href="">帮助</a>
                        <span>|</span>
                    </li>
                    <li>
                        <a href="">反馈</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>
